<template>
  <div class="personal">
    <Gheader
        style="
        margin-bottom: 6px;
        background: #ebebeb;
        color: #333333;
        font-weight: bold;
      "
        :showback="false"
        position="center"
        title="系统"
    ></Gheader>
    <div class="listwrapper">
      <img src="../../assets/img/usertype.png" alt="">
      <div style="text-align: center;color: #010203;margin-top: 40px">
        <div style="font-size: 22px;font-weight: bold">您好呀！</div>
        <div style="color: #535455;font-size: 14px;padding-top: 4px">请选择功能菜单</div>
      </div>
    </div>
    <div class="btnwrapper">
      <van-button style="margin: 0 20px" block size="small" type="info" round @click="gotodetail(0)">交通体验日</van-button>
      <van-button style="margin: 0 20px" block size="small" type="info" round @click="gotodetail(1)">警务车任务平台</van-button>
    </div>
  </div>
</template>

<script>
import {Tabbar, TabbarItem, Toast, Badge, SwipeCell, Field} from 'vant'
import Gheader from '@/components/Header';
import moment from 'moment'
export default {
  name: 'Personal',
  components: {
    Gheader,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Badge.name]: Badge,
    [SwipeCell.name]: SwipeCell,
    [Field.name]: Field
  },
  data() {
    return {
      userInfo: {},
      value1: '',
      dataList: [],
      loading: false,
      finished: false,
      searchParams: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      disabled: true,
      currentChooseItem: {}
    }
  },
  methods: {
    moment,
    gotodetail(type) {
      // if(type === 0) {
        this.$router.push('/nav/home?openid=' + this.$route.query.openid)
      // } else {
      //   this.$router.push('/navyb/home?openid=' + this.$route.query.openid)
      // }
    },
  },
  mounted() {
    if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {
      window.entryUrl = location.href
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/themeVariable.less';
.personal {
  background: #F5F5F5;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  .options {
    display: flex;
    flex-wrap: wrap;
    .options-item {
      width: 49%;
      background: #FFFFFF;
      padding: 20px 18px 10px 18px;
      border: 1px solid #DEEAFC;
      border-radius: 10px;
      margin-bottom: 2%;
      box-sizing: border-box;
      &:nth-child(odd) {
        margin-right: 2%;
      }
      .title {
        color: #333333;
        font-size: 16px;
      }
      .imgs {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
        .jt {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .home-icon {
          width: 66px;
          height: auto;
        }
      }
    }
  }
}
.tasktitle {
  padding: 0 10px;
}
.listwrapper {
  height: calc(100% - 150px);
  overflow: auto;
  margin-top: 10px;
  padding: 30px 0;
  box-sizing: border-box;
}
.list-item {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 0 15px;
  box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px  rgba(0, 0, 0, 0.1);
  &.active {
    box-shadow: 0px 1px 2px -1px rgba(59, 124, 220, 1), 0px 1px 3px  rgba(59, 124, 220, 1);
  }
}
.list-title {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  justify-content: center;
  color: rgba(15, 30, 62, 0.5);
}
.list-item-content {
  color: #646464;
  padding: 10px 5px;
  .items {
    padding: 6px 0;
    display: flex;
  }
}

.btnwrapper {
  padding: 10px;
  display: flex;
}
.status {
  background: #F3F4F6;
  color: #4B5563;
  padding: 5px 8px;
  border-radius: 18px;
  font-size: 12px;
}
.status1 {
  background: #F3F4F6;
  color: #4B5563;
}
.status2 {
  background: #DBEAFE;
  color: #2563EB;
}
.status3 {
  background: #2563EB;
  color: #ffffff;
}
</style>
